<template>
    <div id="page">
        <div class="menu">
            <ul class="ul left_ul">
                <li
                    class="li"
                    @click="forwardLeftPage(item)"
                    v-for="item in leftMenuList"
                    :style="[item.path == $route.path ? {backgroundImage: 'url(' + item.icon_hover + ')'} : { backgroundImage: 'url(' + item.icon + ')' }]"
                    :key="item.code"
                    :class="[item.path == $route.path ? item.index % 2 == 0 ? 'active-even' : 'active-odd' : '']">
                    {{ item.name }}
                </li>
            </ul>
            <div class="center">{{ projectName }}</div>
            <ul class="ul right_ul">
                <li
                    class="li"
                    @click="forwardRightPage(item)"
                    v-for="item in rightMenuList"
                    :style="[item.path == $route.path ? { backgroundImage: 'url(' + item.icon_hover + ')' } : { backgroundImage: 'url(' + item.icon + ')' }]"
                    :key="item.code"
                    :class="[item.path == $route.path ? item.index % 2 == 0 ? 'active-even' : 'active-odd' : '']">
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <div class="line">
            <div class="line-center">
                <div class="left-line"></div>
                <div class="right-line"></div>
            </div>
        </div>
        <div class="infoBox" ref="envStyle" v-show="$route.path != '/board/OnlineCommand'">
            <div class="left">
                <div class="box" style="margin-bottom: 0.1rem;">
                    <!-- <div class="logo" @click="$router.push({ path: '/lead' })"> -->
                    <div class="logo">
                        风电安全管控平台
                    </div>
                    <div class="icon">
                        <div class="left_icon">
                            <img src="../../assets/images/ags/user_left.png" />
                        </div>
                        <div class="right_icon">
                            <img src="../../assets/images/ags/user_right.png" />
                            <span>{{ username }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="center-top">
                    <div class="icon" v-if="weatherObj.weatherPic">
                        <img :src="weatherObj.weatherPic" alt="" />
                    </div>
                    <div class="text">{{ weatherObj.weather }}</div>
                    <div class="text">{{ currentDay }}</div>
                    <div class="text">{{ week }}</div>
                    <div class="text">{{ currentTime }}</div>
                </div>
                <div
                    class="center-bottom"
                    v-show="$route.path == '/board/index'"
                >
                    <ul class="ul">
                        <li
                            class="li"
                            @click="tabActives(item.id)"
                            :class="[
                                item.id == tabActive
                                    ? item.id % 2 == 0
                                        ? 'active-even'
                                        : 'active-odd'
                                    : ''
                            ]"
                            :style="[
                                item.id == tabActive
                                    ? {
                                          backgroundImage:
                                              'url(' + item.icon_hover + ')'
                                      }
                                    : {
                                          backgroundImage:
                                              'url(' + item.icon + ')'
                                      }
                            ]"
                            v-for="item in tabList"
                            :key="item.id"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="box">

                    <div class="operation-icon switch" v-show="$route.path == '/board/index'">
                        <div class="item" style="white-space:nowrap">
                            <el-radio-group v-model="fenceActive">
                                <el-radio :label="item.id" v-for="(item , index) in typeList" :key="index">{{item.name}}</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="item fence" v-if="fenceActive == 1">
                            <el-select v-model="fenceId" style="width:100%; " placeholder="电子围栏:全部" @change="getFenceIdFn">
                                <el-option v-for="(item,index) in fenceIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="operation-icon" @click="screenFullClick">
                        <Tooltip
                            transfer
                            :content="isFullscreen ? '全屏显示' : '退出全屏'"
                            placement="bottom"
                            max-width="200"
                        >
                            <img
                                src="../../assets/images/ags/logo_one.png"
                                alt=""
                            />
                        </Tooltip>
                    </div>
                    <div
                        class="operation-icon"
                        @click="boardMenuAuto = !boardMenuAuto"
                    >
                        <Tooltip
                            transfer
                            :content="!boardMenuAuto ? '开启轮播' : '关闭轮播'"
                            placement="bottom"
                            max-width="200"
                        >
                            <img
                                src="../../assets/images/ags/logo_two.png"
                                alt=""
                            />
                        </Tooltip>
                    </div>
                    <div
                        class="operation-icon"
                        @click="quitBoard"
                    >
                        <Tooltip
                            transfer
                            content="进入后台"
                            placement="bottom"
                            max-width="200"
                        >
                            <img
                                src="../../assets/images/ags/logo_three.png"
                                alt=""
                            />
                        </Tooltip>
                    </div>
                </div>
            </div>
        </div>
        <transition name="fade" mode="out-in">
            <router-view class="router-view" ref="subPage"></router-view>
        </transition>
        <div class="mapStyle" v-show="$store.state.boardMdTabActive == 1 && $route.path == '/board/index'">
            <!-- <div id="map"></div> -->
            <div id="container" class="container"></div>
            <div class="map-mask"></div>
        </div>
        <div class="popup" v-if="isSpecialFlag">
            <div class="pupup_close" @click="isSpecialFlag = !isSpecialFlag">
                <img src="../../assets/images/ags/close.png" alt="" />
            </div>
        </div>
        <div class="pupup_title" v-if="isSpecialFlag">操作提醒</div>
        <div class="pupup_content" v-if="isSpecialFlag">暂未开通该功能，敬请期待!</div>
        <div class="pupup_btn" v-if="isSpecialFlag">
            <Button type="default" ghost @click="isSpecialFlag = !isSpecialFlag">我知道了</Button>
        </div>
        <div class="guidanceTips" v-if="isTipFlag">
            <div class="guidanceTips_bg">
                <div class="guidanceTips_close" @click="isTipFlag = !isTipFlag">
                    <img src="../../assets/images/ags/close.png" alt="" />
                </div>
            </div>
            <div class="guidanceTips_mask"></div>
            <div class="guidanceTips_title">操作提示</div>
            <div class="guidanceTips_list">
                <div class="guidanceTips_item" v-for="item in tipsList" :key="item.id">
                    <div class="icon">
                        <img :src="item.img" />
                    </div>
                    <div class="content">
                        <div class="title">{{item.name}}</div>
                        <div class="introduce">{{item.introduce}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import screenfull from "screenfull";
import { getWeek, getCurrentMonthAndDay } from "@/sever/utils";
import { getWeather } from "@/api/api";

import {GroupCreate} from "@/mixins/group.js";
import {detailsModal} from "../emp/detailsModal";
import {previewImg} from "@/mixins/previewImg";
import {fileType} from "@/mixins/fileType";

export default {
    name: "boardTab",
    mixins:[GroupCreate,detailsModal,previewImg,fileType],
    data() {
        return {
            //星期几
            week: getWeek(),
            //当前时间
            currentTime: "",
            username: localStorage.getItem("username"),
            //当前时间定时器
            currentTimeFlag: null,
            //左侧菜单栏
            leftMenuList: [],
            //右侧菜单栏
            rightMenuList: [],
            //全部导航菜单栏列表
            menuList: [],
            tabList: [
                {
                    id: 1,
                    name: "地图",
                    icon: require("../../assets/images/ags/nav_left.png"),
                    icon_hover: require("../../assets/images/ags/nav_left_hover.png")
                },
                {
                    id: 2,
                    name: "图片",
                    icon: require("../../assets/images/ags/nav_right.png"),
                    icon_hover: require("../../assets/images/ags/nav_right_hover.png")
                },
                /* {
                    id: 3,
                    name: "视频",
                    icon: require("../../assets/images/ags/nav_left.png"),
                    icon_hover: require("../../assets/images/ags/nav_left_hover.png")
                },
                {
                    id: 4,
                    name: "bim模型",
                    icon: require("../../assets/images/ags/nav_right.png"),
                    icon_hover: require("../../assets/images/ags/nav_right_hover.png")
                } */
            ],
            tabActive: 1,
            //操作按钮
            //是否全屏
            isFullscreen: false,
            //是否轮播切换
            boardMenuAuto: false,
            //默认为第一个导航栏
            boardMenuActive: 0,
            //自动轮播定时器
            boardMenuAutoFlag: null,
            //项目名称
            projectName: "",
            //组织机构id
            deptId: "",
            //天气对象
            weatherObj: {},
            active_flag: 1,
            currentDay: getCurrentMonthAndDay(),
            // lng:"",
            // lat:"",
            // 地图对象
            mapObj: "",
            isSpecialFlag: false,
            isTipFlag:true,
            tipsList:[{
                id:1,
                name:'全屏切换菜单',
                introduce:'点击全屏，再次点击退出全屏',
                img:require('../../assets/images/ags/logo_one.png')
            },{
                id:2,
                name:'自动轮播展示菜单',
                introduce:'点击开启轮播，再次点击停止轮播',
                img:require('../../assets/images/ags/logo_two.png')
            },{
                id:3,
                name:'退出，返回功能菜单界面',
                introduce:'点击返回主菜单',
                img:require('../../assets/images/ags/logo_three.png')
            }],

            deptName:"",
        };
    },
    watch: {
        // 监听是否轮播切换
        boardMenuAuto(newValue, oldValue) {
            if (newValue) {
                this.boardMenuAutoFlag = setInterval(this.menuAuto, 3000);
            } else {
                clearInterval(this.boardMenuAutoFlag);
            }
        }
    },
    methods: {
        quitBoard(){
            this.$router.push({ path: '/workbench' })
            localStorage.setItem("isTipFlag",0)
        },
        forwardLeftPage(item){
            if (item.path == "/board/env") {
                this.$router.push({ path: item.path });
                this.$refs['envStyle'].classList.add('envOuterClass')
            } else {
                this.$refs['envStyle'].classList.remove('envOuterClass')
                this.$router.push({ path: item.path });
            }
        },
        forwardRightPage(item) {
            if (item.path == "/board/fse") {
                this.isSpecialFlag = true;
            } else {
                this.$router.push({ path: item.path });
            }
        },
        //监听tab切换，1-地图、2-图片、3-视频、4-bim模型
        tabActives(newValue) {
            this.tabActive = newValue;
            this.$store.commit("setBoardMdTabActive", newValue);
            if (this.$refs["subPage"].hlsObj) {
                this.$refs["subPage"].$refs["videoElement2"].pause();
                this.$refs["subPage"].hlsObj.destroy();
                this.$refs["subPage"].hlsObj = null;
            }
            if (this.$refs["subPage"].EZUIKitObj) {
                this.$refs["subPage"].EZUIKitObj.stop();
                this.$refs["subPage"].EZUIKitObj = null;
                this.$refs["subPage"].$refs["videoElement"].innerHTML = "";
            }
            if (newValue === 1) {
                this.initDate();/* emp detailsModal.js */
                this.getMaps();
            } else if (newValue === 2) {
            } else if (newValue === 3) {
                this.$refs["subPage"].getToken();
                this.$refs["subPage"].getFvsListFn();
            } else if (newValue === 4) {
                // this.$message({
                //     showClose: true,
                //     message: "暂未开通该功能",
                //     type: "warning",
                //     duration: 5000
                // });
                this.isSpecialFlag = true;
            }
        },
        isEmptyObject(obj) {
            for (let item in obj) {
                return true;
            }
            {
                return false;
            }
        },
        getMaps() {
            this.mapObj = "";
            let that = this;
            let projectName = that.projectName;
            that.mapObj = new AMap.Map("map", {
                //  rotateEnable:true,
                //     pitchEnable:true,
                zoom: 17,
                // pitch: 50,
                // rotation: -15,
                // viewMode:'3D', //开启3D视图,默认为关闭
                // zooms:[2,20],
                center: [that.lng, that.lat],
                mapStyle: "amap://styles/whitesmoke"
            });
            let marker = new AMap.Marker({
                map: that.mapObj,
                icon: new AMap.Icon({
                    image: require("../../assets/images/ags/index/location.png"),
                    size: new AMap.Size(23, 36), //图标大小
                    imageSize: new AMap.Size(23, 36)
                }),
                position: [that.lng, that.lat],
                offset: new AMap.Pixel(0, 0)
            });
            marker.setLabel({
                offset: new AMap.Pixel(13, 76), //设置文本标注偏移量
                content: `
                <div class='in_fo in_fo4' style="background-color: rgba(79, 236, 255, 0.3);">
                ${projectName}
                </div>
                `, //设置文本标注内容
                direction: "top" //设置文本标注方位
            });
            that.mapObj.setFitView();
        },

        // 初始化导航栏列表
        initMenuListFn() {
            this.leftMenuList = [];
            this.rightMenuList = [];
            let menuList = this.$store.state.ModalPage;
            menuList.sort((a,b)=>{
                return a.index - b.index
            })
            let length = menuList.length;
            for (let i = 0; i < length; i++) {
                let item = menuList[i];
                let obj = {
                    code: item.code,
                    path: item.url,
                    name: item.name,
                    index: item.index
                };
                if (i < 4) {
                    if (i % 2 == 0) {
                        obj["icon"] = require("../../assets/images/ags/nav_left.png");
                        obj["icon_hover"] = require("../../assets/images/ags/nav_left_hover.png");
                        this.leftMenuList.push(obj);
                    } else {
                        obj["icon"] = require("../../assets/images/ags/nav_right.png");
                        obj["icon_hover"] = require("../../assets/images/ags/nav_right_hover.png");
                        this.leftMenuList.push(obj);
                    }
                } else {
                    if (i % 2 == 0) {
                        obj["icon"] = require("../../assets/images/ags/nav_left.png");
                        obj["icon_hover"] = require("../../assets/images/ags/nav_left_hover.png");
                        this.rightMenuList.push(obj);
                    } else {
                        obj["icon"] = require("../../assets/images/ags/nav_right.png");
                        obj["icon_hover"] = require("../../assets/images/ags/nav_right_hover.png");
                        this.rightMenuList.push(obj);
                    }
                }
            }
            this.menuList = [...this.leftMenuList, ...this.rightMenuList];
        },
        //获取实时天气
        getWeatherList() {
            let params = {
                deptId: this.deptId
            };
            getWeather(params).then(res => {
                if (res.code == 200) {
                    this.$nextTick(() => {
                        this.weatherObj = res.data || {};

                        console.log('weatherPic: ', this.weatherObj.weatherPic)
                        this.weatherObj["weatherPic"] = this.weatherObj.weatherPic ?
                            require("../../assets/images/common/" + this.weatherObj.weatherPic + ".png") :
                            require("../../assets/images/common/duoyun.png");
                        this.$forceUpdate();
                    });
                } else {
                    // this.$Message.warning(res.msg);
                    console.log('====', res.msg, '====');
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        ///导航菜单栏自动切换
        menuAuto() {
            for (let i = 0; i < this.menuList.length; i++) {
                if (this.$route.path === this.menuList[i].path) {
                    this.boardMenuActive = i + 1;
                    break;
                }
            }
            if (this.boardMenuActive == this.menuList.length) {
                this.boardMenuActive = 0;
            }
            this.$router.push({
                path: this.menuList[this.boardMenuActive].path
            });
            this.boardMenuActive++;
        },
        initYMDHMS() {
            let newDate = new Date();
            let yy = newDate.getFullYear();
            let mm = newDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let dd = newDate.getDate(); //获取当前日（1-31）
            let hh = newDate.getHours();
            let minut_M = newDate.getMinutes();
            let ss = newDate.getSeconds();
            mm = mm < 10 ? "0" + mm : mm;
            dd = dd < 10 ? "0" + dd : dd;
            hh = hh < 10 ? "0" + hh : hh;
            minut_M = minut_M < 10 ? "0" + minut_M : minut_M;
            ss = ss < 10 ? "0" + ss : ss;
            this.currentTime = hh + ":" + minut_M + ":" + ss;
            // console.log(this.currentTime);
            // this.currentTime = hh + ":" + minut_M;
        },
        //初始化全屏工具
        initScreenFull() {
            if (screenfull.enabled) {
                screenfull.request(); // 默认全屏显示
                this.isFullscreen = true;
            }
        },
        //开启/关闭全屏
        screenFullClick() {
            if (!screenfull.enabled) {
                this.$Message.warning("您的浏览器不支持此功能");
                return false;
            }
            screenfull.toggle();
            this.isFullscreen = !this.isFullscreen;
        },
        keydown(event) {
            if (event.keyCode === 122) {
                // this.isFullscreen = false;
                event.returnValue = false;
                event.cancelBubble = true;
            }
            let ev = window.event || event;
            let code = ev.keyCode || ev.which;
            if (code == 116) {
                if (!this.isFullscreen) {
                    if (ev.preventDefault) {
                        ev.preventDefault();
                    } else {
                        ev.keyCode = 0;
                        ev.returnValue = false;
                    }
                } else {
                    location.reload();
                }
            }
        },

        initDate(){
            this.deptId = this.$store.state.porjectObject.deptId;
            this.lat = this.$store.state.porjectObject.lat == undefined ? 30.592335 : this.$store.state.porjectObject.lat;
            this.lng = this.$store.state.porjectObject.lng == undefined ? 114.29484 : this.$store.state.porjectObject.lng;
            this.deptName = this.$store.state.porjectObject.name;
            this.getGRPList(this.deptId);
            this.getFenceListFn();
            this.getIndexMapEmpTabFn();
        },
    },
    mounted() {
        this.initYMDHMS();
        this.currentTimeFlag = setInterval(() => {
            this.initYMDHMS(); // 显式调用，确保 this 正确
        }, 1000);


        this.$store.commit("setBoardMdTabActive", 1);
        this.projectName = this.$store.state.porjectObject.title;
        this.deptId = this.$store.state.porjectObject.deptId;
        this.lat = this.$store.state.porjectObject.lat == undefined ? 30.592335 : this.$store.state.porjectObject.lat;
        this.lng = this.$store.state.porjectObject.lng == undefined ? 114.29484 : this.$store.state.porjectObject.lng;

        this.initDate();/* emp detailsModal.js */

        this.initMenuListFn();
        this.getWeatherList();
        this.initScreenFull();
        if(localStorage.getItem("isTipFlag") == 0){
            this.isTipFlag = true
            setTimeout(() => {
               this.isTipFlag = false
            }, 10000);
        }else{
            this.isTipFlag = false
        }
        window.addEventListener("keydown", this.keydown, false);
        if (this.tabActive == 1) {
            this.getMaps();
        }

        for (let i = 0; i < this.menuList.length; i++) {
            if (this.$route.path === this.menuList[i].path) {
                this.boardMenuActive = i;
                return;
            }
        }
    },
    beforeDestroy() {
        if (screenfull.isFullscreen) {
            screenfull.toggle();
        }
        if (this.currentTimeFlag) {
            clearInterval(this.currentTimeFlag);
        }
        if (this.boardMenuAutoFlag) {
            clearInterval(this.boardMenuAutoFlag);
        }
        window.removeEventListener("keydown", this.keydown, false);
    }
};
</script>

<style scoped lang="scss">
@import "../../assets/font/font.css";
@import "../../assets/style/ags/animation.scss";
@function pxToRem($val) {
    @return $val/100 + rem;
}
.mapStyle {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    #map {
        width: 100%;
        height: 100%;
    }
    #container {
        width: 100%;
        height: 100%;
    }
    .map-mask {
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        background-image: radial-gradient(
            transparent 10%,
            rgba(5, 14, 21, 0.25) 30%,
            rgba(5, 14, 21, 0.48) 40%,
            rgba(5, 14, 21, 1) 80%,
            rgba(5, 14, 21, 1) 100%
        );
    }
}
.popup {
    width: pxToRem(450);
    height: pxToRem(238);
    z-index: 9999;
    position: absolute;
    margin: 0 auto;
    background-image: url("../../assets/images/ags/popup.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.63;
    .pupup_close {
        img {
            position: absolute;
            width: pxToRem(27);
            height: pxToRem(27);
            right: pxToRem(50);
            top: pxToRem(35);
            cursor: pointer;
        }
    }
}
.pupup_title {
    position: absolute;
    margin: 0 auto;
    z-index: 9999;
    font-size: pxToRem(20);
    font-weight: bold;
    color: #fff;
    margin-top: pxToRem(-110);
}
.pupup_content {
    position: absolute;
    margin: 0 auto;
    z-index: 9999;
    font-weight: 400;
    color: #fff;
    margin: pxToRem(-30) 0 0 pxToRem(-150);
}
.pupup_btn {
    position: absolute;
    margin: 0 auto;
    z-index: 9999;
    margin-top: pxToRem(70);
    // right: pxToRem(180);
    // bottom: pxToRem(65);
    /deep/ .ivu-btn-ghost.ivu-btn-dashed,
    .ivu-btn-ghost.ivu-btn-default {
        color: #6bc9ff;
        border-color: #6bc9ff;
    }
    /deep/ .ivu-btn-ghost.ivu-btn-dashed:hover,
    .ivu-btn-ghost.ivu-btn-default:hover {
        color: #e5ebee;
        border-color: transparent;
        background: #6bc9ff;
        opacity: 1 !important;
    }
}
.guidanceTips{
        position: absolute;
        width: pxToRem(510);
        height: pxToRem(340);
        top:18%;
        right: 0;
        z-index: 999;
        -webkit-animation: bounce-down 1.6s linear infinite;
        animation: bounce-down 1.6s linear infinite;
    .guidanceTips_bg{
        width: pxToRem(510);
        height: pxToRem(340);
        background-image: url("../../assets/images/ags/tips.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .guidanceTips_close{
                position: absolute;
                width: pxToRem(27);
                height: pxToRem(27);
                right: pxToRem(60);
                top: pxToRem(37);
                border-radius: 50%;
                z-index: 9999;
                cursor: pointer;
                img{
                    width: pxToRem(27);
                    height: pxToRem(27);
                }
        }
    }
    .guidanceTips_mask{
        position: absolute;
        top:7%;
        left: 5%;
        width: pxToRem(443);
        height: pxToRem(291);
        background-image: url("../../assets/images/ags/tips_mask.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .guidanceTips_title{
            position: absolute;
            left: 16%;
            top: 15%;
            z-index: 9999;
            font-size: pxToRem(21);
            color: #fff;
            letter-spacing: pxToRem(3);
    }
    .guidanceTips_list{
            position: absolute;
            left: 16%;
            top: 25%;
            z-index: 9999;
            .guidanceTips_item{
                display: flex;
                justify-content: flex-start;
                padding: pxToRem(8) 0;
                .icon{
                    margin-right: pxToRem(20);
                    img{
                        width: pxToRem(37);
                        height: pxToRem(37);
                    }
                }
                .content{
                    letter-spacing: pxToRem(3);
                    .title{
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        font-size: pxToRem(16);
                        color: #fff;
                    }
                    .introduce{
                        font-size: pxToRem(14);
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #A8DFFF;
                    }
                }
            }
    }
}
#page {
    width: 100vw;
    height: 100vh;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    background-image: url("../../assets/images/ags/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    // pointer-events: none;
    .menu {
        width: 100%;
        height: 12%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        background-image: url("../../assets/images/ags/menu_bc.png");
        background-repeat: no-repeat;
        background-size: 100% 110%;
        z-index: 3;
        .ul {
            width: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-width: pxToRem(645);
            .li {
                width: pxToRem(125);
                margin: 0 pxToRem(13) pxToRem(15) 0;
                height: pxToRem(45);
                text-align: center;
                line-height: pxToRem(45);
                font-size: pxToRem(18);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #a8dfff;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                list-style: none;
                cursor: pointer;
                transition: all 0.3s ease-in;
                &:hover {
                    font-size: pxToRem(18);
                    font-family: Source Han Sans CN;
                    //font-weight: bold;
                    color: #ffffff;
                    text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #ffffff;
                }
                &.active-odd {
                    font-size: pxToRem(18);
                    font-family: Source Han Sans CN;
                    //font-weight: bold;
                    background-image: url("../../assets/images/ags/nav_left_hover.png");
                    color: #062a3e;
                    text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #ffffff;
                    filter: drop-shadow(0px 0px 20px rgb(8, 109, 139));
                }
                &.active-even {
                    font-size: pxToRem(18);
                    font-family: Source Han Sans CN;
                    //font-weight: bold;
                    background-image: url("../../assets/images/ags/nav_right_hover.png");
                    color: #062a3e;
                    text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #ffffff;
                    filter: drop-shadow(0px 0px 20px rgb(8, 109, 139));
                }
            }
        }
        .left_ul {
            padding: pxToRem(20) 0 0 pxToRem(30);
        }
        .right_ul {
            margin-right: pxToRem(-80);
            padding: pxToRem(20) pxToRem(30) 0 0;
        }
        .center {
            flex: 1;
            font-size: pxToRem(30);
            font-family: Source Han Sans CN;
            font-weight: bold;
            height: pxToRem(45);
            text-align: center;
            line-height: pxToRem(45);
            margin-right: 80px;
            color: #ffffff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }
    }
    .line {
        width: 100%;
        height: pxToRem(16);
        // margin-bottom: pxToRem(7);
        background-image: url("../../assets/images/ags/line.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        z-index: 3;
        top: -1.3%;
        .line-center {
            display: flex;
            justify-content: space-around;
            .left-line {
                background-image: url("../../assets/images/ags/left_line.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: pxToRem(250);
                height: pxToRem(10);
                margin: pxToRem(8) pxToRem(80) 0 0;
            }
            .right-line {
                background-image: url("../../assets/images/ags/right_line.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: pxToRem(250);
                height: pxToRem(10);
                margin-top: pxToRem(8);
            }
        }
    }
    .envOuterClass{
        z-index: 0 !important;
    }
    .infoBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 3;
        padding: 0 pxToRem(25) 0 pxToRem(25);
        // margin-bottom: pxToRem(5);
        .left {
            position: relative;
            width: pxToRem(672);
            height: pxToRem(100);
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 0 pxToRem(40) 0 pxToRem(15);
            box-sizing: border-box;
            .box {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: pxToRem(16);
                font-family: SourceHanSansCN-Medium;
                font-weight: 400;
                color: #01dff4;
                .logo {
                    width: pxToRem(190);
                    height: pxToRem(37);
                    line-height: pxToRem(45);
                    text-align: center;
                    color: #94d8ff;
                    cursor: pointer;
                    // margin-right: pxToRem(13);
                    background-image: url("../../assets/images/ags/logo_left_title.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .icon {
                    width: pxToRem(280);
                    height: pxToRem(75);
                    line-height: pxToRem(75);
                    text-align: center;
                    // text-indent: 1em;
                    color: #94d8ff;
                    margin: pxToRem(10) 0 0 pxToRem(10);
                    display: flex;
                    justify-content: flex-start;
                    .left_icon {
                        img {
                            width: pxToRem(58);
                            height: pxToRem(75);
                        }
                    }
                    .right_icon {
                        margin-left: pxToRem(-50);
                        img {
                            height: pxToRem(69);
                            width: pxToRem(260);
                        }
                        span {
                            height: pxToRem(35);
                            width: pxToRem(150);
                            position: absolute;
                            top: pxToRem(25);
                            left: pxToRem(280);
                            line-height: pxToRem(45);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
        .right {
            display: flex;
            justify-content: flex-end;
            padding: 0 0 0 pxToRem(40);
            width: pxToRem(672);
            .box {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: pxToRem(16);
                font-family: SourceHanSansCN-Medium;
                font-weight: 400;
                color: #01dff4;
                .operation-icon {
                    margin: 0 pxToRem(10);
                    cursor: pointer;
                    &:last-of-type {
                        margin-right: 0;
                    }
                    img {
                        width: pxToRem(38);
                        height: pxToRem(38);
                    }
                }
            }
        }
        .center {
            height: pxToRem(100);
            display: flex;
            flex-flow: column nowrap;
            padding: 0 pxToRem(50);
            justify-content: center;
            align-items: center;
            color: #94d8ff;
            box-sizing: border-box;
            .center-top {
                display: flex;
                margin-bottom: pxToRem(8);
                justify-content: space-around;
                .text {
                    font-size: pxToRem(18);
                    padding: 0 pxToRem(10);
                    white-space: nowrap;
                }
                img {
                    width: pxToRem(28);
                    height: pxToRem(28);
                }
            }
            .center-bottom {
                .ul {
                    width: auto;
                    display: flex;
                    margin-top: pxToRem(10);
                    justify-content: center;
                    align-items: flex-end;
                    min-width: pxToRem(645);
                    .li {
                        width: pxToRem(119);
                        margin: 0 pxToRem(13) pxToRem(15) 0;
                        height: pxToRem(35);
                        text-align: center;
                        line-height: pxToRem(40);
                        font-size: pxToRem(16);
                        font-family: SourceHanSansCN-Medium;
                        font-weight: 400;
                        color: #94d8ff;
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        list-style: none;
                        cursor: pointer;
                        transition: all 0.3s ease-in;
                        &:hover {
                            //font-weight: bold;
                            color: #ffffff;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                        }
                        &.active-odd {
                            //font-weight: bold;
                            font-weight: normal;
                            font-family: SourceHanSansCN-Medium-,
                                SourceHanSansCN-Medium;
                            background-image: url("../../assets/images/ags/nav_left_hover.png");
                            color: #062a3e;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                        }
                        &.active-even {
                            //font-weight: bold;
                            font-family: SourceHanSansCN-Medium-,
                                SourceHanSansCN-Medium;
                            background-image: url("../../assets/images/ags/nav_right_hover.png");
                            color: #062a3e;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                        }
                    }
                }
            }
        }
    }
    .router-view {
        position: relative;
        width: 100%;
        height: calc(100% - 1.13rem);
        padding: 0 pxToRem(25) pxToRem(20) pxToRem(25);
        transform: translate(0, 0);
        pointer-events: none;
        z-index: 10;
    }
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    animation: page-enter-animation 2s ease-in-out;
}
.slide-fade-leave-active {
    animation: page-out-animation 2s ease-in-out;
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
    //transform: translate(-100vw,-100vh);
    //animation: page-out-animation 2s ease-in-out;
}
@-webkit-keyframes bounce-down {
       25% {
            -webkit-transform: translateY(-4px);
       }
       50%, 100% {
            -webkit-transform: translateY(0);
       }
       75% {
            -webkit-transform: translateY(4px);
       }
}

@keyframes bounce-down {
        25% {
             transform: translateY(-4px);
        }
        50%, 100% {
             transform: translateY(0);
        }
        75% {
             transform: translateY(4px);
        }
}

/deep/.ivu-tooltip-dark {
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(55, 197, 241, 0.3) !important;
    }
    .ivu-tooltip-inner {
        background-color: rgba(55, 197, 241, 0.3) !important;
    }
}

/deep/ .switch{

    .item{
        width: auto;
        height: 20px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: var(--themeColor);

        .el-radio__inner{
            background-color: transparent;
        }

        &.fence{
            padding: 0;
            border:none;
            overflow: hidden;

            .el-input__inner{
                border: none;
                background-color: transparent !important;
                border: 0px solid transparent !important;
            }
        }
        .ivu-select-visible .ivu-select-selection{
            box-shadow :none;
        }
        .ivu-select-selection{
            border: none;
            font-size: 14px;
            color: #999999;
            &:hover{
                border: none;
            }
        }
    }
}
</style>
